<template>
  <div id="root">
    <div class="box">
      <img :src="img" />
      <div
        class="covers"
        @mouseenter="toggle"
        @mouseleave="toggle"
        @mousemove="mood"
      ></div>
      <div class="cover" :style="tran" :class="{ a: hide }"></div>
      <div class="picture">
        <img
          :src="item"
          alt=""
          v-for="(item, index) in images"
          :key="index"
          @click="change(index)"
        />
      </div>
    </div>
    <div class="box1" :class="{ a: hide }">
      <img :src="img" ref="big" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tran: { top: '', left: '' },
      hide: true,
      i: 0,
    }
  },
 
  methods: {
    mood(e) {
      let big = this.$refs.big
      let leftX = e.offsetX
      let topY = e.offsetY
      let i = 0
      if (topY <= 50) {
        topY = 50
      } else if (topY > 250) {
        topY = 250
      }
      if (leftX <= 50) {
        leftX = 50
        i = -1
      } else if (leftX > 165) {
        leftX = 165
        i = 1
      } else {
        i = 0
      }
      this.tran.top = topY - 50 + 'px'
      this.tran.left = leftX - 50 + 'px'
      big.style.left = -1 * leftX - i * 50 + 'px'
      big.style.top = -1 * topY + 'px'
    },
    toggle() {
      this.hide = !this.hide
    },
    change(index) {
      this.i = index
      this.img=this.images[index]
    },
  },
  props: ['images','img'],
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#root {
  height: 400px;
}
.box {
  position: relative;
}
.box img {
  width: 215px;
  height: 300px;
}
.box .cover {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
}

.box .covers {
  width: 215px;
  height: 300px;
  position: absolute;
  top: 0px;
  z-index: 9999;
}
.box1 {
  width: 215px;
  height: 300px;
  position: relative;
  left: 250px;
  top: -300px;
  overflow: hidden;
}
.box1 img {
  width: 200%;
  height: 200%;
  top: -50px;
  position: absolute;
  z-index: 9999;
}
.a {
  display: none;
}
.picture {
  width: 250px;
  position: absolute;
  overflow-x: auto;
  white-space: nowrap;
  z-index: 99;
}
.picture img {
  margin-left: 5px;
  width: 78px;
  height: 78px;
}
</style>
